<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>详情页</title>
    <link rel="stylesheet" type="text/css" href="/css_z/base.css"/>
    <link rel="stylesheet" type="text/css" href="/css_z/detail.css"/>
    <link rel="stylesheet" type="text/css" href="/css_z/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css_z/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css_z/loading.css"/>
    <link rel="stylesheet" href="/css_z/swiper.min.css">
    <script src="/js_z/rem.js"></script>
    <script src="/js_z/jquery.min.js" type="text/javascript"></script>
    <script src="/js_z/others.js"></script>
    <script src="/js_z/swiper.jquery.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script type="text/javascript">
        $(window).load(function () {
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300)
        })

        function toshare() {
            $(".am-share").addClass("am-modal-active");
            if ($(".sharebg").length > 0) {
                $(".sharebg").addClass("sharebg-active");
            } else {
                $("body").append('<div class="sharebg"></div>');
                $(".sharebg").addClass("sharebg-active");
            }
            $(".sharebg-active,.share_btn").click(function () {
                $(".am-share").removeClass("am-modal-active");
                setTimeout(function () {
                    $(".sharebg-active").removeClass("sharebg-active");
                    $(".sharebg").remove();
                }, 300);
            })
        }

        $(function () {
            var params = getParams();//商品id

            //从sessionStorage中获取登录的user
            var user = JSON.parse(sessionStorage.getItem("user"));

            $.get('/shop/'+params.id+'/product',function (data) {
				$('#productDetail').renderValues(data);
				$('#carDetail').renderValues(data);
				var picsUrl = data.pics;
				var	pics = picsUrl.split(';');
				//商品详情页面图片
                $('#productContent').after("<img src="+pics[0]+" width='100%' style='margin-right:5px' id='p1'>")
                $('#p1').after("<img src="+pics[1]+" width='100%' style='margin-right:5px' id='p2'>")
                $('#p2').after("<img src="+pics[2]+" width='100%' style='margin-right:5px' >")
                //轮播图图片显示
				$('#img1').attr('src',pics[0]);
				$('#img2').attr('src',pics[1]);
				$('#img3').attr('src',pics[2]);
            });

            //加入购物车
			$('#toCar').click(function () {
			    var number = $('#count').html();
                console.log(number);


                $.ajax({
                    //async:同步
                    async: false,
                    url: '/sessions/car/addItem',
                    data:{productId:params.id,count:number},
                    method: "put",
                    success: function (data) {
                        if (data.success){
                            // 将购物车放进session
                            sessionStorage.setItem("shopCar",JSON.stringify(data.resultTwo));
                            $(document).dialog({
                                overlayClose: true,
                                titleShow: false,
                                autoClose: false,
                                content: '加入成功!',
								onClosed:function () {
                                    window.location.href='/mine/shop/shopcar.html'
                            	},
                            });
                        }
                    }
                });


            });
        });
    </script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
	<body>
		<!--header star-->
	    <header class="mui-bar mui-bar-nav" id="header">
			<a class="btn" href="javascript:history.go(-1)">
	            <i class="iconfont icon-fanhui"></i>
	        </a>
	        <h4>商品详情</h4>
	    </header>
		<!--header end-->
		
		<div class="warp warptwo clearfloat">
			<div class="detail clearfloat" id="productDetail">
				<!--banner star-->
				<div class="banner swiper-container">
		            <div class="swiper-wrapper">
		                <div class="swiper-slide">
							<a href="javascript:void(0)"><img class="swiper-lazy" render-src="coverUrl"></a>
						</div>
		                <div class="swiper-slide">
							<a href="javascript:void(0)"><img class="swiper-lazy" id="img1"></a>
						</div>
		                <div class="swiper-slide">
							<a href="javascript:void(0)"><img class="swiper-lazy" id="img2"></a>
						</div>
		                <div class="swiper-slide">
							<a href="javascript:void(0)"><img class="swiper-lazy" id="img3"></a>
						</div>
		                <div class="swiper-slide">
							<a href="javascript:void(0)"><img class="swiper-lazy" render-src="coverUrl"></a>
						</div>
		            </div>
		            <div class="swiper-pagination"></div>
		        </div>
				<!--banner end-->
				<div class="top clearfloat box-s">
					<div class="shang clearfloat">
						<div class="zuo clearfloat fl over2 box-s">
							<span render-html="productName"></span>
						</div>
						<div class="you clearfloat fr">
							<i class="iconfont icon-fenxiang"></i>
							<p>分享</p>
						</div>
					</div>
					<div class="xia clearfloat">
						<p class="jifen fl box-s"><samp render-html="price"></samp>积分</p>
						<span class="fr">销量8件</span>
					</div>
				</div>
				<div class="middle clearfloat box-s">
					<span class="fl">商品详情</span><br>
					<img render-src="coverUrl" width='100%' style='margin-right:5px'>
					<p render-html="content.content" id="productContent">
					</p>

				</div>
			</div>
		</div>
		
		<!--footerone star-->
		<div class="footerone clearfloat">
			<div class="left clearfloat fl" style="background: white">
				<ul>
					<li style="display: flex;justify-content: center; align-items: center;padding-top: 0;">

					</li>
				</ul>
			</div>
			<div class="right clearfloat fl">
				<a href="javascript:" class="btn  fl" style="background-color: white">&nbsp;</a>
				<span class="btn fl" onClick="toshare()">加入购物车</span>
			</div>
		</div>
		<!--footerone end-->
		
		<!--弹出购物车内容-->
		<div class="am-share">
		    <div class="am-share-footer">
		        <button class="share_btn"><img src="/img/icon/chahao.png" /></button>
		    </div>
		    <div class="am-share-sns box-s">
		        <div class="sdetail clearfloat" id="carDetail">
		            <div class="top clearfloat">
		                <div class="tu clearfloat fl">
		                    <span></span>
		                    <img render-src="coverUrl"/>
		                </div>
		                <div class="you clearfloat fl">
		                    <p class="tit" render-html="productName"></p>
		                    <span render-html="price"></span>
		                </div>
		            </div>
		            <div class="middle clearfloat">
		                <p>商品简介</p>
		                <div class="xia clearfloat">
		                    <p render-html="introduce"></p>
		                </div>
		            </div>
		            <div class="bottom clearfloat">
		                <p class="fl">购买数量(限购2个)</p>
		                <div class="you clearfloat fr">
		                    <ul>

		                        <li id="down"><img src="/img/icon/jian.jpg" /></li>
		                        <li id="count">1</li>
		                        <li >
									<img src="/img/icon/jia.jpg" id="minus"/>
								</li>
		                    </ul>
		                </div>
		            </div>
		        </div>
		    </div>
		    <a class="shop-btn db" id="toCar">确定</a>
		</div>
		<script type="text/javascript">
            $('#minus').click(function () {
                if ($('#count').html() <= 1) {
                    document.getElementById('count').innerHTML++
                }else {
                    $(document).dialog({
                        overlayClose: true,
                        content: '买那么多干嘛?',
                    });
                    $('#minus').attr('disabled','disabled');
                }
            });
			var down = document.getElementById("down");
		    var count = document.getElementById("count");
		    window.onload = function(){
		        down.onclick = function(){
		            if(count.innerHTML > 1){
		                count.innerHTML--;
		            }else{
		                count.innerHTML = 1;
		            }
		        }
		        $(".middle .xia li").click(function() {
		            $(this).addClass('cur').siblings().removeClass('cur');
		        });

		    }
		</script>
		<!--footer star-->
	    <footer class="page-footer fixed-footer" id="footer">
			<ul>
				<li>
					<a href="index.html">
						<i class="iconfont icon-shouye"></i>
						<p>首页</p>
					</a>
				</li>
				<li class="active">
					<a href="cation.html">
						<i class="iconfont icon-icon04"></i>
						<p>分类</p>
					</a>
				</li>
				<li>
					<a href="shopcar.html">
						<i class="iconfont icon-gouwuche"></i>
						<p>购物车</p>
					</a>
				</li>
				<li>
					<a href="center.html">
						<i class="iconfont icon-yonghuming"></i>
						<p>我的</p>
					</a>
				</li>
			</ul>
		</footer>
		<!--footer end-->
	</body>
	
</html>
